<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>圆饼图</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
        text {
            font-family: "Open Sans";
            text-anchor: middle;
            color: rgb(34, ​ 34, ​ 34);
            font-size: 12px;
        }
    </style>
</head>

<body>
    <svg id="chart" width="400" height="100"></svg>
    <script>
        var data = [{
            label: "7am",
            sales: 20
        }, {
            label: "8am",
            sales: 12
        }, {
            label: "9am",
            sales: 8
        }, {
            label: "10am",
            sales: 27
        }, {
            label: "18am",
            sales: 22
        }, {
            label: "12am",
            sales: 15
        }]

        var g = d3.select('#chart')
            .selectAll("g")
            .data(data)
            .enter()
            .append('g')
        g.append("circle")
            .attr('cy', 40)
            .attr('cx', (d, i) => (i + 1) * 50)
            .attr('r', (d) => d.sales)
            .attr('fill', (d) => `RGB(${d.sales*10},${d.sales*5},${d.sales})`)
        g.append("text")
            .attr('y', 90)
            .attr('x', (d, i) => (i + 1) * 50)
            .text((d) => d.label)
    </script>

</body>

</html>